import Vue from 'vue'
import Router from 'vue-router'
// import Login from './views/login/index.vue'
/* Step1)下面情况，默认的会导入 ./views/login 目录下的index.vue组件 */
import Login from './views/login/'
/* Step2)导入首页整体布局 注意因为不叫index.vue,所以在导入时必须书写导入的文件名，如果叫index.vue则可以不指明文件名 */
import Layout from '@/components/Layout.vue'
/* Step2)导入欢迎页,产品页，雇员页，供应商 */
import Home from '@/views/home'
import Member from '@/views/member'
import Supplier from '@/views/supplier'
import Staff from '@/views/staff'
import Goods from '@/views/goods'


Vue.use(Router)
const originalPush = Router.prototype.push
Router.prototype.push = function push (location) {
return originalPush.call(this, location).catch(err => err)
}
export default new Router({
    routes:[
        /* Step1) */
        {
            path:'/login',
            /* 仅仅是一个路由名称 */
            name:'login',
            /* 组件对象 */
            component:Login,
        },
        /* Step2) */
        {
            path: '/',
            /* 仅仅是一个路由名称 */
            name: 'layout',
            /* 组件对象 */
            component: Layout,
            /* 当路径是 #/时，自动重定向到 #/home，所以子路由在一打开页面就能展示出来
            否则必须点击首页之后才会激活Home子路由组件 */
            redirect:'/home',
            /* 因为欢迎页都显示在Layout中的组件中，所以是Layout的子路由，因此<router-view>
            标签必须书写在Layout中*/
            children:[
                {
                    path:'/home',
                    /* 注意此组件显示在Layout组件中 */
                    component:Home,
                    mata:{title:'首页'}
                },
                /* 
                    不使用这种思路书写    
                    {
                        path:'/member',
                        component:Member,
                    } 
                */
            ]
        },
        /* 使用另外一种思路设置路由 */
        {
            path:'/member',
            component:Layout,
            children:[
                {
                    /* 路径最终拼接 /member/ 则显示Layout组件并且在此组件中显示子组件Member */
                    path:'/',
                    component:Member,
                    meta:{title:'会员管理'},
                }
            ]
        },
        {
            path: '/supplier',
            component: Layout,
            children: [
                {
                    path: '/',
                    component: Supplier,
                    meta: { title: '供应商管理' },
                }
            ]
        },
        {
            path: '/staff',
            component: Layout,
            children: [
                {
                    path: '/',
                    component: Staff,
                    meta: { title: '雇员管理' },
                }
            ]
        },
        {
            path: '/goods',
            component: Layout,
            children: [
                {
                    path: '/',
                    component: Goods,
                    meta: { title: '产品管理' },
                }
            ]
        },
    ]
})